<!-- 清理数据页面 -->
<!-- 用于管理和删除不同类型的任务数据 -->
<template>
  <view class="clear-data-page">
    <!-- 导航栏 -->
    <NavBar title="清理数据" showBack="true"></NavBar>
    
    <!-- 主内容区域 -->
    <view class="main-content">
      <!-- 选项卡 -->
      <view class="tabs">
        <view 
          class="tab" 
          :class="{ active: activeTab === 'recurring' }" 
          @click="switchTab('recurring')"
        >
          周期性数据
        </view>
        <view 
          class="tab" 
          :class="{ active: activeTab === 'oneTime' }" 
          @click="switchTab('oneTime')"
        >
          一次性数据
        </view>
      </view>
      
      <!-- 数据列表区域 -->
      <view class="data-list">
        <!-- 全选和删除按钮 -->
        <view class="list-header" v-if="filteredTasks.length > 0">
          <view class="select-all">
            <uni-checkbox v-model="selectAll" @change="toggleSelectAll"></uni-checkbox>
            <text>全选</text>
          </view>
          <uni-button 
            type="warn" 
            size="mini" 
            @click="deleteSelectedTasks"
            :disabled="selectedTasks.length === 0"
          >
            删除
          </uni-button>
        </view>
        
        <!-- 任务列表 -->
        <view class="task-item" v-for="task in filteredTasks" :key="task.id">
          <uni-checkbox 
            v-model="task.isSelected" 
            @change="handleTaskSelection(task)"
          ></uni-checkbox>
          <view class="task-content">
            <view class="task-title">{{ task.title }}</view>
            <view class="task-info">
              <text v-if="task.startTime">时间: {{ task.startTime }}</text>
              <text v-if="task.isRecurring && task.recurrencePattern" class="recurrence-info">
                重复: {{ getRecurrenceText(task.recurrencePattern) }}
              </text>
            </view>
          </view>
        </view>
        
        <!-- 空状态 -->
        <view class="empty-state" v-if="filteredTasks.length === 0">
          <uni-icons type="empty" size="60" color="#ccc"></uni-icons>
          <text>{{ activeTab === 'recurring' ? '没有周期性任务' : '没有一次性任务' }}</text>
        </view>
      </view>
      
      <!-- 底部操作按钮 -->
      <view class="bottom-actions">
        <uni-button 
          type="warn" 
          @click="clearAllTasks" 
          class="clear-all-button"
          :disabled="filteredTasks.length === 0"
        >
          清空{{ activeTab === 'recurring' ? '所有周期性' : '所有一次性' }}数据
        </uni-button>
      </view>
    </view>
  </view>
</template>

<script>
// 导入组件
import NavBar from '../../components/NavBar.vue'

export default {
  components: {
    NavBar
  },
  data() {
    return {
      // 当前激活的选项卡
      activeTab: 'recurring', // 'recurring' 或 'oneTime'
      // 是否全选
      selectAll: false,
      // 本地任务列表（用于管理显示和选择状态，不从store直接监听变化）
      localTasks: [],
      // 临时存储被删除的任务ID，用于异步更新store
      deletedTaskIds: []
    }
  },
  computed: {
    // 从Vuex获取所有任务
    allTasks() {
      return this.$store.state.tasks
    },
    
    // 根据当前选项卡过滤任务
    filteredTasks() {
      // 根据选项卡过滤并排除已删除的任务
      return this.localTasks.filter(task => {
        return task.isRecurring === (this.activeTab === 'recurring') &&
               !this.deletedTaskIds.includes(task.id)
      })
    },
    
    // 获取选中的任务
    selectedTasks() {
      return this.filteredTasks.filter(task => task.isSelected)
    }
  },
  watch: {
    // 监听选项卡切换，重置全选状态
    activeTab() {
      this.selectAll = false
    },
    
    // 监听选中任务数量变化，更新全选状态
    selectedTasks: {
      handler() {
        this.selectAll = this.filteredTasks.length > 0 && 
                         this.selectedTasks.length === this.filteredTasks.length
      },
      deep: true
    }
  },
  onShow() {
    // 页面显示时初始化本地任务列表，但不从store同步后续变化
    this.initLocalTasks()
  },
  methods: {
    // 切换选项卡
    switchTab(tab) {
      this.activeTab = tab
    },
    
    // 初始化本地任务列表
    initLocalTasks() {
      // 从store获取任务并创建本地副本
      this.localTasks = this.allTasks.map(task => ({
        ...task,
        isSelected: false
      }))
      // 重置删除记录
      this.deletedTaskIds = []
    },
    
    // 切换全选状态
    toggleSelectAll() {
      this.filteredTasks.forEach(task => {
        task.isSelected = this.selectAll
      })
    },
    
    // 处理单个任务选择
    handleTaskSelection(task) {
      // 查找并更新对应的任务选择状态
      const targetTask = this.localTasks.find(t => t.id === task.id)
      if (targetTask) {
        targetTask.isSelected = task.isSelected
      }
    },
    
    // 获取重复模式的文本描述
    getRecurrenceText(pattern) {
      const recurrenceMap = {
        'daily': '每天',
        'weekly': '每周',
        'workdays': '工作日'
      }
      return recurrenceMap[pattern] || '未知'
    },
    
    // 删除选中的任务
    deleteSelectedTasks() {
      if (this.selectedTasks.length === 0) {
        return
      }
      
      // 显示确认对话框
      uni.showModal({
        title: '确认删除',
        content: `确定要删除选中的 ${this.selectedTasks.length} 个任务吗？`,
        success: (res) => {
          if (res.confirm) {
            // 获取选中任务的ID
            const taskIdsToDelete = this.selectedTasks.map(task => task.id)
            
            // 在本地标记为删除（不立即更新store，避免UI刷新）
            this.deletedTaskIds = [...this.deletedTaskIds, ...taskIdsToDelete]
            
            // 重置选择状态
            this.selectAll = false
            
            // 提示删除成功
            uni.showToast({
              title: '任务已删除',
              icon: 'success'
            })
            
            // 延迟更新store，使用户看不到刷新过程
            setTimeout(() => {
              taskIdsToDelete.forEach(taskId => {
                this.$store.commit('deleteTask', taskId)
              })
            }, 500)
          }
        }
      })
    },
    
    // 清空所有任务
    clearAllTasks() {
      if (this.filteredTasks.length === 0) {
        return
      }
      
      // 显示确认对话框
      uni.showModal({
        title: '确认清空',
        content: `确定要清空所有${this.activeTab === 'recurring' ? '周期性' : '一次性'}任务吗？`,
        success: (res) => {
          if (res.confirm) {
            // 获取要清空的任务ID
            const taskIdsToDelete = this.filteredTasks.map(task => task.id)
            
            // 在本地标记为删除（不立即更新store，避免UI刷新）
            this.deletedTaskIds = [...this.deletedTaskIds, ...taskIdsToDelete]
            
            // 重置选择状态
            this.selectAll = false
            
            // 提示清空成功
            uni.showToast({
              title: '数据已清空',
              icon: 'success'
            })
            
            // 延迟更新store，使用户看不到刷新过程
            setTimeout(() => {
              taskIdsToDelete.forEach(taskId => {
                this.$store.commit('deleteTask', taskId)
              })
            }, 500)
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.clear-data-page {
  padding-top: 88rpx; /* 导航栏高度 */
  min-height: 100vh;
  background-color: #f5f5f5;
}

.main-content {
  padding: 20rpx;
}

.tabs {
  display: flex;
  background-color: white;
  border-radius: 10rpx 10rpx 0 0;
  overflow: hidden;
}

.tab {
  flex: 1;
  padding: 20rpx;
  text-align: center;
  font-size: 32rpx;
  color: #666;
  position: relative;
}

.tab.active {
  color: #4CAF50;
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 4rpx;
  background-color: #4CAF50;
}

.data-list {
  background-color: white;
  border-radius: 0 0 10rpx 10rpx;
  padding-bottom: 20rpx;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.select-all {
  display: flex;
  align-items: center;
}

.select-all text {
  margin-left: 10rpx;
  font-size: 28rpx;
  color: #666;
}

.task-item {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.task-item:last-child {
  border-bottom: none;
}

.task-content {
  flex: 1;
  margin-left: 20rpx;
}

.task-title {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.task-info {
  display: flex;
  font-size: 26rpx;
  color: #999;
}

.recurrence-info {
  margin-left: 20rpx;
}

.empty-state {
  padding: 80rpx 0;
  text-align: center;
}

.empty-state text {
  display: block;
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #999;
}

.bottom-actions {
  margin-top: 30rpx;
  padding: 0 20rpx;
}

.clear-all-button {
  width: 100%;
  background-color: #f44336;
  border-color: #f44336;
}
</style>